<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload=function() {

            Vue.component("todoWord",{
                props:['total','done'],
                template:'<span>总共{{total}}个事项,{{done}}个已完成，{{total-done}}个未完成。</span>'
            })

            var a1 = new Vue({
                el: '#a1',
                methods:{

                   addthing: function () {

                        this.todos.push({name:this.thing,done:false});
                    },
                    switchcheck:function (index) {
                        this.todos[index].done=!this.todos[index].done;
                    }

                },

                data: {
                    thin:'',
                    message: 'Todo List',
                    thing: null,
                    todos: [
                        {name: '欧拉欧拉欧拉',done:false},
                        {name: '无駄无駄无駄',done:false},
                        {name: '快用你无敌的白金之星想想办法',done:true},
                        {name: '我感觉high的不行',done:false}
                    ]
                },
                computed:{
                    done:function(){
                       var count=0;
                        for(var i=0;i<this.todos.length;i++){
                            if(this.todos[i].done){
                                count++;
                            }
                        }
                        return count;
                    }
                }

            });
        }


    </script>
    <style>.del{text-decoration:line-through }</style>
</head>
<body>
<div id="a1">
    <p>{{message}}</p>
    <input type="text" v-model="thing" v-on:keyup.enter="addthing">
    <button v-on:click="addthing"  >添加</button>

    <div v-for="(todo,index) in todos">
        <input type="checkbox" v-on:click="switchcheck(index)" v-bind:checked="todo.done">{{index+1}}.
        <span v-bind:class="{del:todo.done}">{{todo.name}}</span>    </div>
    <p>共{{ todos.length}}个代办事项，{{ done}}个已完成，{{ todos.length-done}}个未完成。</p>

</div>

</div>
<todo-word :total="todos.length" :done="done"></todo-word>
</div>
</body>
</html>